<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
</head>

<body>
    <h1>商品详情介绍</h1>
    <table>
        <tr>
            <th>商品ID</th>
            <th>商品名称</th>
            <th>商品库存</th>
            <th>商品价格</th>
            <th>商品状态</th>
            <th>已售</th>
            <th>商品图片</th>
            <th>操作</th>
        </tr>
        <tbody>

        </tbody>
    </table>
    <script>
        var huoqu = location.search
        var id = huoqu.substring(4, huoqu.length)
        var tbody = document.querySelector('tbody')

        var xhr = new XMLHttpRequest()
        xhr.open('get', 'https://liu.zzgoodqc.cn/goodsx/detail?id=' + id)
        xhr.send()
        xhr.responseType = 'json'
        xhr.onload = () => {
            var a = xhr.response
            tbody.innerHTML = `
        <tr>
        <td>${a.data.id}</td>
        <td>${a.data.goods_name}</td>
        <td>${a.data.stock}</td>
        <td>${a.data.price}</td>
        <td>${a.data.status}</td>
        <td>${a.data.sold}</td>
        <td><img src="${a.data.img}width="200px" height="200px" "></td>
        <td>
            <button onclick="xiu(${a.data.id})">修改</button>
            <button onclick="shan(${a.data.id})">删除</button>
            <button onclick="xiang(${a.data.id})">详情</button>
        </td>
    </tr>
            `
        }
        xhr.onerror = (q) => {
            console.log(q);
        }


    </script>
</body>

</html>